<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Search Suggest</title>
<script type="text/javascript" src="http://www.cheyian.com/_index/js/jquery.js"></script>
<script type="text/javascript" src="http://www.cheyian.com/_index/js/jq.suggest.js"></script>
</head>
<style>
body{font-size:12px;font-family:tahoma,arial,sans-serif; color:#666;width:100%;margin:0;}
body, p, td, th, input, select, textarea, div, span {font-size:12px; margin:0; padding:0; }
ul, ol,li, dl, dt, dd, li{ margin:0; padding:0; list-style-type:none;}
h1, h2, h3, h4, h5, h6,form { font-size:12px; margin:0; padding:0; }
img{border:0px;}
a{color:#333;text-decoration:none;outline:none; cursor:pointer;}
a:hover{text-decoration:underline;}
.radius8{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;}
.radius5{border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
.relative{ position:relative;}

.flowCont{margin:50px auto; width:650px;}
.flowCont h2{font-size:16px; margin-bottom:10px;}
.fsuggest{position:absolute;top:38px;left:0px;width:583px;background-color:#FFF;border:1px solid #CDCDCD; display:none;}
	.fsuggest-scroll{height:250px;overflow:hidden;overflow-y:scroll;}
	.fsuggest li{display:block;line-height:28px;padding:0 5px; cursor:pointer;}
	.fsuggest li.hover,.fsuggest li:hover{text-decoration:none;background-color:#F5F5F5;}
	.fsuggest .red{color:#F00;}
	.relative{ position:relative;}
.flowCont .row{clear:both; padding:8px 0;}
	.input{color:#999;line-height:29px;height:29px;width:580px;padding-left:3px;border:1px solid #c7c7c7;border-right-color:#dadada;background-color:#FFF;-moz-box-shadow:1px 1px 2px #dddddd inset;-webkit-box-shadow:1px 1px 2px #dddddd inset;box-shadow:1px 1px 2px #dddddd inset;font-size:12px;vertical-align:middle;}
	.def{font-size:12px !important;color:#bbb !important;}	
</style>
<body>
<div class="flowCont">
<h2>Search Suggest</h2>
<div class="row relative">
   <input type="input" data-value="输入关键词" value="" class="input def" style="background:#FFF8E1" name="keySuggest">
   <input type="hidden" name="keySuggest_id" value="0">
</div>
</div>

<script type="text/javascript">
$(function(){
	//初始化默认值
	$('.flowCont :input[data-value]').each(function(){
        if($(this).val() == ''){
            $(this).val($(this).attr('data-value'));
        }
	});	
	 //恢复默认value值
    $('.flowCont :input[data-value]').blur(function(){
        $(this).addClass('def');
        if($(this).val() == ''){
            $(this).val($(this).attr('data-value'));
        }
    }).focus(function(){
        $(this).removeClass('def');
        if($(this).val() == $(this).attr('data-value')){
            $(this).val('');
        }
    });	
	$("input[name=keySuggest]").suggest(
		{resultsClass:'fsuggest',selectClass:'hover',matchClass:'red',sLength:1,ajaxurl:'http://www.cheyian.com/test/word/query'}
	);		   
})
</script>
</body>
</html>
